<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>stone</title>
		<style type="text/css">
			*{margin:0;padding:0;font-family:"microsoft yahei";}
			/* 整个大盒子 */
			#box{
				width:800px;
				height:500px;
				margin:0px auto;
				position:relative;
				overflow:hidden;
				background:url("img/back.jpg");
				zoom:1.2;
			}
			/* 飞行的小鸟 */
			#bird{
				width:70px;
				height:70px;
				position:absolute;
			}
			#bird_back{
				width:100%;
				height:100%;
			}
			/* 生成的石头 */
			.stone{
				width:30px;
				height:30px;
				position:absolute;
				top:-50px;
			}
			.stone img{width:100%;height:100%;}
			/* 游戏开始界面 */
			#start{
				width:100%;
				height:100%;
				position:relative;
			}
			/* 开始标题 */
			#start_bt{
			    width:100%;
			    height:50px;
				background:linear-gradient(to left,#00eeee,#0044ff);
				-webkit-background-clip: text;
				color: transparent;
			    font-weight:bold;
			    font-size:40px;
			    float:left;
			    margin:45px auto 0 auto;
				text-align:center;
			}
			/* 游戏说明 */
			#start_sm{
			    width:500px;
			    height:120px;
			    background:#000000;
			    border-radius:15px;
			    font-size:17px;
				position:absolute;
				top:320px;
				left:130px;
			    padding:20px;
			    opacity:0.5;
			    color:#ffffff;
			}
			#start_sm p{text-indent:30px;}
			/* 游戏结束 */
			#over{
			    width:100%;
			    height:100%;
			    background:black;
			    opacity:0.7;
			    color:#ffffff;
			    font-size:50px;
			    text-align:center;    
			    padding-top:100px;
			    display:none;
			    position:absolute;
			    z-index:10;
			    top: -600px;
			}
			/* 死亡后页面显示的分数 */
			#ndfen{
			    width:100%;
			    height:40px;
			    line-height:40px;
			    text-align:center;
			    color:#eeeeee;
			    margin:50px auto;
			    font-size:18px;
			}
			/* 重新开始 */
			#rest{
			    width:130px;
			    height:40px;
			    cursor:pointer;
			    line-height:40px;
			    text-align:center;
			    color:#eeeeee;
			    margin:0px auto;
			    font-size:20px;
			}
			/* 左上角的秒数 */
			#second{
			    width:80px;
			    height:40px;
			    border:3px solid #4e97aa;
			    border-radius:5px;
			    color:#00aaff;
			    font-size:25px;
			    text-align:center;
			    line-height:40px;
			    font-weight:bolder;
			    margin:5px;
			    position:absolute;
			    z-index:9;
			    display: none;
			}
			/* 游戏通关后的页面*/
			#pass{
				width:800px;
				height:500px;
				background:url(img/pass1.jpg);
				background-size:cover;
				position:absolute;
				top:-500px;
				z-index:15;
				opacity: 0.5;
			}
			#pass_tg{
				width:500px;
				height:150px;
				background:url(img/pass2.png);
				background-size:cover;
				position: absolute;
				top:-150px;
				left:150px;
			}
			/* 弹出的文字 */
			#pass_word{
				width:600px;
				height:100px;
				color:#000;
				font-size:20px;
				margin:300px auto ;
				border-radius: 20px;
				box-shadow: 0px 0px 10px #ffffff;
				padding:20px;
				background: #fff;
				opacity: 0.6;
				display: none;
			}
			/* 开始按钮 */
			#button{width:150px;height:50px;border-radius:30px;background:linear-gradient(to left,#6cd9e8,#21a4e2);box-shadow: 0px 0px 10px #00aaff;
				color:#ffffff;font-size:20px;text-align: center;line-height: 50px;position: absolute;top:200px;left:325px;}
			#button:hover{background:linear-gradient(to left,#aaeeff,#00ccff);cursor:pointer;}
		</style>
	</head>
	<body>
		<div id="box">
			<div id="bird"><img id="bird_back" src="img/bird1.gif"></div>
			<div id="over">
					Game&emsp;Over 
				<div id="ndfen">你存活了：<span id="fss">0</span>秒 / 加油！还差<span id="sy">20</span>秒</div>
				<div id="rest" onclick="rest()">重新开始</div>
			</div>
			<div id="pass">
				<div id="pass_tg"></div>
				<div id="pass_word"></div>
			</div>
			<div id="start">
				<div id="start_bt">R o c k &emsp; F a l l </div>
				<div id="button" onclick="start()">开始游戏</div>
				<div id="start_sm">
					<b>说明：</b>游戏目标是通过不断的移动来躲避飞来的石子。<br>
					<p>游戏方式为键盘操作，使用方向键上、下、左、右键移动小鸟。（注意不要连键）</p>
					<p>游戏开始5秒后石头会加速一次，10秒后会第二次加速。</p>
					加油通过吧！
				</div>
			</div>
			
			<div id="second">20</div>
			<audio src="img/back.mp3" id="music_back"></audio>
			<audio src="img/over.mp3" id="music_over"></audio>
			<audio src="img/victory.mp3" loop="loop" id="music_pass"></audio>
			
			
		</div>
		
		<script type="text/javascript">
			var meT = null;   //键盘抬起
			var kg = "guan";  //开关
			var ms = 20;       //开始的秒数
			var time1 = 500;  //生成石头的时间
			var rsd = 2;      //石头单位时间掉落距离
			
			
			var box=document.getElementById("box"); //鸟的初始位置
			var bird=document.getElementById("bird");
			var bird_left=box.offsetWidth/2 - bird.offsetWidth/2;
			bird.style.left= bird_left+"px";  //横坐标
			var bird_top=255;
			bird.style.top= bird_top+"px";  //纵坐标
			var second = document.getElementById("second"); //获取左上角的秒数
			
			function rand(m,n){  //随机数
			return Math.ceil(Math.random()*(n-m+1))+(m-1);}
			
			// 封成一个大的函数
			function start(){
				kg = "kai";
				var ks = document.getElementById("start");
				ks.style.display = "none";
				second.style.display = "block";  // 显示左上角
				music_back.play();   //播放背景音乐
			window.onkeyup = function(){    //抬起键盘
				clearInterval(meT);
				meT = null;
			}
			window.onkeydown=function(e){   //键盘操作
				if(e.keyCode == 37){
					moveLeft();
				}else if(e.keyCode == 38){
					moveUp();
				}else if(e.keyCode == 39){
					moveRight();
				}else if(e.keyCode == 40){
					moveDown();					
				}
			}
			function moveLeft(){   //左移
				if(meT == null){
					document.getElementById("bird_back").src = "img/bird2.gif";
					meT=setInterval(function(){
						var bleft = bird.offsetLeft - 4;
						bird.style.left = bleft + "px";
						if(bleft<=0){
							bleft=0;	
							bird.style.left = bleft + "px";
						}
					},10)
				}
			}
			function moveRight(){   //右移
				if(meT == null){
					document.getElementById("bird_back").src = "img/bird1.gif";
					meT=setInterval(function(){
						var bleft = bird.offsetLeft + 4;
						bird.style.left = bleft + "px";
						var bright = box.offsetWidth - bird.offsetWidth;
						if(bleft>=bright){
							bird.style.left = bright + "px";
						}
					},10)
				}
			}
			function moveUp(){     //上移
				if(meT == null){
					meT=setInterval(function(){
						var btop = bird.offsetTop - 4;
						bird.style.top = btop + "px";
						if(btop<=100){
							btop=100;	
							bird.style.top = btop + "px";
						} 
					},10)
				}
			}
			function moveDown(){    //下移
				if(meT == null){
					meT=setInterval(function(){
						var btop = bird.offsetTop + 4;
						bird.style.top = btop + "px";
						var bheig =box.offsetHeight - bird.offsetHeight - 50;
						if(btop>=bheig){
							bird.style.top = bheig + "px";
						} 
					},10)
				}
			}
			}
			
			/* 左上角的秒数累加 */
			var miao = setInterval(function(){
				if (kg == "guan"){return;}
				ms--;
				if(ms==15){
					rsd = 3;
					second.style.color = "#0000ff";
					clearInterval(stoneT);
					time1 = 300;
					stoneT = setInterval(create,time1); 
				}else if(ms==10){
					rsd = 4;
					second.style.color = "#ff0000";
					clearInterval(stoneT);
					time1 = 200;
					stoneT = setInterval(create,time1);
				}
				second.innerHTML = ms;
				//游戏通关
				if(ms<=0){
					pass();
				}
			},1000)
			
			
			// 随机生成石头&掉落石头 
			var create = function(){
				if (kg == "guan"){return;}
				// 生成石头
				var rock = document.createElement("div");
				var n = rand(1,3);
				rock.innerHTML="<img src='img/rock"+n+".gif'>";
				rock.setAttribute("class","stone");
				var wz=box.offsetWidth - 120;
				var wleft = rand(0,wz);
				rock.style.left = wleft+"px";
				box.appendChild(rock);
				// 开始掉落
					var LR = rand(-2,2);
				var fall = setInterval(function(){
					var rocktop = rock.offsetTop+ rsd;
					var rockleft = rock.offsetLeft + LR;
					if(rocktop>=box.offsetHeight){  //石头落地消失
						clearInterval(fall);
						box.removeChild(rock);
					} 
				// 砸落小鸟 
					var hitbird = document.getElementById("bird");
					var HiL = hitbird.offsetLeft;
					var HiT = hitbird.offsetTop;
					var RcL = rock.offsetLeft +15;
					if(RcL<=HiL+60 && RcL>=HiL+10 && rocktop+30>=HiT+10 && rocktop<=HiT+60){
							gameover();return;
					}
					rock.style.left = rockleft + "px";
					rock.style.top = rocktop + "px";
				},9)
			}
			var stoneT = setInterval(create,time1); 
			
			//游戏通关后的页面
			function pass(){
				music_back.pause(); //背景音乐停
				music_pass.play();   //播放通关背景音乐
				
				// 清除石头移动的定时器和秒数的, 将游戏通关的页面向下拉
				clearInterval(miao);
				clearInterval(stoneT);
				var pass=document.getElementById("pass");
				setInterval(function(){
					var ptop = pass.offsetTop + 3;
					pass.style.top = ptop + "px";
					if(ptop>=0){
						ptop=0;
						pass.style.top = ptop + "px";
					}
				},10)
				// 透明度增加
				var opac = 0.1;
				setInterval(function(){
					opac = opac+0.05 ;
					pass.style.opacity = opac ;
					if(opac>=1){opac=1}
				},200)
				// 延迟2秒 恭喜通关向下拉
				setTimeout(function(){
					var ptg = document.getElementById("pass_tg");
					var timeptg = setInterval(function(){
						var ptgt = ptg.offsetTop + 3 ;
						ptg.style.top = ptgt + "px";
						if(ptgt>=100){
							ptgt=100;
							ptg.style.top = ptgt + "px";
						}
					},10)
					password();
				},2500)
			}
			
			function password(){
				//打字的声音
					var music2 = document.createElement('audio');
					music2.innerHTML = '<audio src="img/dz.mp3" autoplay="autoplay" ></audio>';
					box.appendChild(music2);
				
				//开始初始化基础文本
				var pass_word=document.getElementById("pass_word");
				pass_word.style.display = "block";
				var str="谢谢你，在你的帮助下，我成功的回到了家！如果人类都像你一样热心帮助我们，不再私自捕捉、\
							猎杀鸟类，鸟类也会为人类尽情地歌唱！那会是一个多么美好的世界啊！！";  
				var i=0;
				var flag=null; 	 
				function done(){
					if(i<str.length){
						pass_word.innerHTML=str.substring(0,i+1);
						i=i+2;
					}
					else{
						clearInterval(flag);
					}
				}
				flag=setInterval(done,50); //文字逐渐显示的时间
			}
			
			//游戏结束后弹出界面
			function gameover(){
				music_back.pause(); //背景音乐停
				music_over.play();
				//死亡后，小鸟一直向下掉
				setInterval(function(){
					var btop = bird.offsetTop + 5;
					bird.style.top = btop + "px";
					var heig =box.offsetHeight - bird.offsetHeight;   //掉的边界
					if(btop>=heig){
						btop=0;	
						bird.style.top = heig + "px";
					}
				},100)
				// 清除秒数定时器,并把结果赋给结束页面
				clearInterval(miao);
				var fss = document.getElementById("fss");
				fss.innerHTML = 20-ms;
				var sy = document.getElementById("sy");
				sy.innerHTML = ms ;
				// 清除石头移动的定时器, 将游戏结束的页面向下拉
				clearInterval(stoneT);
				var over=document.getElementById("over");
				over.style.display = "block";
				setInterval(function(){
					var otop = over.offsetTop + 2;
					over.style.top = otop + "px";
					if(otop>=0){
						otop=0;
						over.style.top = otop + "px";
					}
				},15)
			}
			
			function rest(){
				window.location.reload();   //刷新页面,相当于F5
			}
		</script>
	</body>
</html>